<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="自助进件" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="tipsBox">
			<text class="tips">请完善进件信息</text>
		</view>
		<view class="entryChannelBox">
			<text class="title">进件渠道</text>
			<view class="channelBox">
				<text class="channel">中金子账户</text>
				<!-- <text class="state notAvailable">未开通</text> -->
				<text class="state haveOpened">已开通</text>
				<image src="../../../static/icons/assetAccount-triangle.png"></image>
			</view>
		</view>
		<view class="processBox">
			<text class="processTitle">
				步骤1
				<text>未提交</text>
			</text>
			<text class="tips">填写店铺资料</text>
			<button class="processButton">去填写</button>
		</view>
		<view class="processBox">
			<text class="processTitle">
				步骤2
				<text>未签约</text>
			</text>
			<text class="tips">签署收款合同</text>
			<button class="processButton notArrive">去签约</button>
		</view>
		<view class="processBox">
			<text class="processTitle">
				步骤3
				<text>未认证</text>
			</text>
			<text class="tips">微信支付宝实名认证</text>
			<button class="processButton notArrive">去认证</button>
		</view>
		<text class="KeyTips">*完成日23点自动切换支付渠道</text>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
.tipsBox{
	width: 100%;
	height: 220rpx;
	float: left;
	background:linear-gradient(to right,rgb(248,239,214),rgb(246,232,168));
	.tips{
		width: auto;
		float: left;
		margin-left: 50rpx;
		font-size: 50rpx;
		height: 100%;
		align-items: center;
		display: flex;
		color: #ffbc04;
		font-weight: bold;
	}
}
.entryChannelBox{
	width: 100%;
	height: 90rpx;
	background-color: #fff;
	margin-top: 20rpx;
	float: left;
	.title{
		width: auto;
		float: left;
		margin-left: 40rpx;
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: rgb(51, 51, 51);
	}
	.channelBox{
		width: auto;
		float: right;
		height: 100%;
		display:flex;
		align-items: center;
		margin-right: 40rpx;
		.channel{
			width: auto;
			float: left;
			font-size: 27rpx;
			color: rgb(103, 103, 103);
		}
		.state{
			width: auto;
			padding: 6rpx 15rpx;
			background-color: rgb(245, 245, 245);
			font-size: 24rpx;
			font-weight: 400;
			border-radius: 6rpx;
			border:1rpx solid rgb(221,221,221);
			float: left;
			margin:0rpx 10rpx;
		}
		image{
			width: 27rpx;
			height: 27rpx;
			float: right;
		}
		.notAvailable{
			color: rgba(207,19,34,0.8);
			background-color: rgba(254,163,158,0.1);
			border-color: rgb(254,163,158);
		}
		.haveOpened{
			color: rgba(58,157,14,0.8);
			background-color: rgba(182,235,143,0.1);
			border-color: rgb(182,235,143);
		}
	}
}
.processBox{
	width: 100%;
	height: auto;
	float: left;
	background-color: #fff;
	margin-top: 20rpx;
	.processTitle{
		width: calc(100% - 80rpx);
		float: left;
		margin-left: 40rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 35rpx;
		font-weight: bold;
		color:rgb(51, 51, 51);
		margin-top: 15rpx;
		text{
			width: auto;
			margin-left:15rpx;
			padding:5rpx 15rpx ;
			height: 60rpx;
			line-height: 60rpx;
			background-color: rgb(245, 245, 245);
			font-size: 25rpx;
			font-weight: 400;
			border-radius: 6rpx;
			border:1rpx solid rgb(221,221,221);
			color: rgb(112,112,112);
		}
	}
	.tips{
		width: calc(100% - 80rpx);
		float: left;
		margin-left: 40rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 24rpx;
		color: rgb(112,112,112);
	}
	.processButton{
		width: calc(100% - 80rpx);
		float: left;
		margin-left: 40rpx;
		height: 75rpx;
		line-height: 75rpx;
		margin-top: 10rpx;
		margin-bottom: 25rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		background-color: #ffbc04;
	}
	.processButton::after{
		border-width: 0rpx;
	}
	.notArrive{
		background-color: #bfbfbf;
	}
}
.KeyTips{
	width: calc(100% - 80rpx);
	float: left;
	margin-left: 40rpx;
	height: 50rpx;
	line-height: 50rpx;
	font-size: 26rpx;
	margin-top: 15rpx;
	color: orangered;
}
</style>